<template>
  <view class="page">
    <view class="left" ref="left">
      <image
        class="image"
        v-for="(item, i) in leftList"
        :key="i"
        :src="item"
        mode="widthFix"
      ></image>
    </view>
    <view class="right" ref="right">
      <image
        class="image"
        v-for="(item, i) in rightList"
        :key="i"
        :src="item"
        mode="widthFix"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500"
      ], //所有图片
      leftList: [], //左边列图片
      rightList: [], //右边列图片
      leftHeight: 0, //左边列高度
      rightHeight: 0, //右边列高度
      columnWidth: 0 //列宽度
    }
  },
  mounted() {
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".left")
        .boundingClientRect((res) => {
          this.columnWidth = res.width
          //方法1
          // this.setWaterFallLayout()
          //方法2
          this.setWaterFallLayout2()
        })
        .exec()
    })
  },
  methods: {
    //方法1通过img.onload，小程序不支持
    async setWaterFallLayout() {
      for (let item of this.imageList) {
        let img = new Image()
        img.src = item
        try {
          let h = await this.getImgHeight(img)
          if (this.leftHeight <= this.rightHeight) {
            this.leftList.push(item)
            this.leftHeight += h
          } else {
            this.rightList.push(item)
            this.rightHeight += h
          }
        } catch (e) {
          console.log(e)
        }
      }
    },
    //获取图片高度
    getImgHeight(img) {
      return new Promise((resolve, reject) => {
        img.onload = () => {
          let h = (img.height / img.width) * this.columnWidth
          resolve(h)
        }
        //加载出错
        img.onerror = () => {
          reject("error")
        }
      })
    },
    //方法2通过uni.getImageInfo，小程序支持
    async setWaterFallLayout2() {
      for (let item of this.imageList) {
        try {
          let h = await this.getImgHeight2(item)
          if (this.leftHeight <= this.rightHeight) {
            this.leftList.push(item)
            this.leftHeight += h
          } else {
            this.rightList.push(item)
            this.rightHeight += h
          }
        } catch (e) {}
      }
    },
    getImgHeight2(url) {
      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: url,
          success: (e) => {
            resolve(e.height)
          },
          fail: (e) => {
            reject(e)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 0 1%;
  box-sizing: border-box;
}

.left,
.right {
  margin: 0 auto;
  width: 48%;
}

.image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 20rpx;
  overflow: hidden;
}
</style>
